<template>
	<view>
		<!-- 
		 1.  如果购物车carts 为空 直接渲染空白页面
		 2.  否则如果购物车不为空 就渲染商品列表以及底部工具栏
		 -->
		<!-- 购物车不为空 直接渲染列表
		 carts.length === 0 =>  false 
		  -->
		<view v-if="carts.length">

			<view class="pyg_cart">
				<!-- 商品列表开始 -->
				<view class="cart_list">
					<view class="cart_list_item" v-for="(item,index) in carts" :key="item.goods_id">
						<!-- 图标开始 -->
						<view :class="[item.checked?'iconfont icon-xuanzhong':'unselected']" @tap="handleCheck"
							:data-goods_id="item.goods_id"></view>
						<!-- 图标结束 -->
						<!-- 图片开始 -->
						<view class="image_wrapper">
							<image :src="item.goods_small_logo"></image>
						</view>
						<!-- 图片结束 -->
						<!-- 商品描述还有商品的增减开始 -->
						<view class="goods_desc">
							<!-- 商品的描述开始 -->
							<view class="goods_desc_title">
								{{item.goods_name}}
							</view>
							<!-- 商品的描述结束 -->
							<!-- 商品的增减开始 -->
							<view class="goods_desc_func">
								<view class="price">￥{{item.goods_price}}</view>
								<!-- 商品的加减功能区开始 -->
								<view class="goods_desc_addAndSub">
									<!-- 
		                点击加减的时候，需要绑定商品信息
		                1. goods_id
		                2.opertaion => 1 或者 -1 
		             -->
									<view class="iconfont icon-iconset0187" :data-goods_id="item.goods_id"
										data-operation="-1" @tap="handleOperation($event)"></view>
									<view class="num">{{item.num}}</view>
									<view class="iconfont icon-54" :data-goods_id="item.goods_id" :data-operation="1"
										@tap="handleOperation"></view>
								</view>
								<!-- 商品的加减功能区结束 -->
							</view>
							<!-- 商品的增减结束 -->
						</view>
						<!-- 商品描述还有商品的增减结束 -->
					</view>
				</view>
				<!-- 商品列表结束 -->
				<!-- 底部工具栏开始 -->
				<view class="tools_set">
					<!-- 左边工具栏开始 -->
					<view class="tools_left">
						<view :class="[allChecked?'iconfont icon-xuanzhong':'unselected']" @tap="handleAllChecked">
						</view>
						<view class="allSelectText">全选</view>
						<view class="totalText">合计:</view>
						<view class="totalPrice">￥{{totalPrice||0}}</view>
					</view>
					<!-- 左边工具栏结束 -->
					<!-- 右边工具栏开始 -->
					<!-- 
		          优化逻辑
		          1.如果去结算这里它的商品数量为0 “去结算” 灰掉 不能点击
		           2. 只有 去结算 的数量不为0 才可以跳转到支付页面
		       -->
					<view class="tools_right" v-if="!!totalNum">
						<navigator url="/pages/pay/pay">去结算({{totalNum||0}})</navigator>
					</view>
					<view v-else class="tools_right_disable">
						去结算({{totalNum||0}})
					</view>
					<!-- 右边工具栏结束 -->
				</view>

				<!-- 底部工具栏结束 -->

			</view>
		</view>

		<!-- 购物车为空 直接渲染空白页面 -->
		<view class="pyg_cart_empty" v-else>
			<image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3298947587,976044362&fm=15&gp=0.jpg"
				mode="widthFix"></image>
			<view class="empty_text">购物车居然是空的</view>
			<view class="empty_info">再忙，也记得买点什么犒赏自己~</view>
			<navigator url="/pages/category/main" open-type="switchTab">
				<view class="go_shopping">去逛逛</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	// pages/cart/index.js
	/* 
	  A. 获取购物车初始化数据 => 在onShow 中获取
	  1. 从本地缓存中获取购物车的缓存数据 key = "carts"
	   如果获取的结果是空，那么直接返回一个空数组
	  2. 获取方式 通过uni.getStorageSync("carts")
	***************************************
	B. 实现空白购物车 
	    1. "去逛逛" =》 跳转到分类商品页面
	    2. 温馨提示的信息内容
	****************************************
	购物车列表的选中事件 handleCheck
	1. 获取当前被点击列表的 唯一标识  goods_id
	2. 获取当前的购物小车列表 carts
	3. 对购物车小车列表 carts 进行循环 找到 goods_id 对应的 item
	4. item.checked = ! item.checked
	5. 再把最新的cart 通过 setCart 方法设置回去 
	****************************************
	购物车全选逻辑 handleAllChecked
	1. 获取一下当前全选的状态 => allChecked => 值只有两个 true|false
	2. 获取当前购物车列表数据 carts
	3. allChecked = !allChecked
	4. 对购物车里面的数据 carts 进行循环 v.checked = allChecked
	5. 调用 setCart 方法将 carts 数据存回去

	****************************************
	setCart 数据处理逻辑
	A. allChecked 的处理逻辑
	1. allChecked 如果购物车里面的购物车数据 v.checked 属性都为true => allChecked = true
	2. 其它情况下 allChecked = false
	B. totalPrice 处理逻辑
	1. 获取购物车列表 carts
	2. 循环carts 找到到 v.checked 为真的 item
	3. totalPrice = sum(v.num * v.goods_price) 所有checked 为true 
	的商品 的数量X价格 的总和
	C.totalNum 处理逻辑
	1. 获取购物车列表 carts
	2. 循环carts 找到到 v.checked 为真的 item
	3. totalNum  = sum(v.num) 所有checked 为true
	的商品 的数量 的总和
	****************************************
	handleOperation 处理购物小车的加减逻辑
	1. 当点击 + 的时候，那么就是商品数量+1
	2. 当点击 - 的时候
	   a.目前商品数量大于0，直接减1
	   b.当商品数量等于0，提示用户是否要删除本商品，如果确定，直接
	   删除；如果取消，本操作取消。
	 */
	import {
		showModal
	} from "@/utils/asyncWx.js"
	export default {
		data() {
			return {
				carts: [], //购物小车的数据
				allChecked: false, //默认购物车里面的商品都是被选中的
				totalNum: 0, //选中商品的数量
				totalPrice: 0 //选中的商品价格总和
			}
		},
		onShow: function() {
			//获取是空，直接返回空数组
			let carts = uni.getStorageSync("carts") || [];
			this.setCart(carts);
		},
		methods: {
			//处理购物小车的加减逻辑
			handleOperation: async function(e) {
				//获取点击列表的参数 goods_id operation
				let {
					goods_id,
					operation
				} = e.currentTarget.dataset;
				operation = parseInt(operation);
				//获取一下本地缓存中的购物车信息
				const carts = uni.getStorageSync("carts");
				//找一下 点击的商品 在carts中的位置 index
				const index = carts.findIndex(v => v.goods_id == goods_id);
				// 加减的操作
				if (operation == -1 && carts[index].num - 1 === 0) {
					//执行确认操作,这里代表商品数量执行减号之后，变成0
					const res = await showModal({
						content: "您确定要删除商品？"
					});
					//确认要删除该商品
					if (res.confirm) {
						carts.splice(index, 1)
					}

				} else {
					carts[index].num += operation;
				}
				this.setCart(carts);
			},
			// 购物车列表的全选事件
			handleAllChecked: function(e) {
				//从this.data里面获取 allChecked 还有 购物车数据列表 carts

				let allChecked = this.allChecked;
				let carts = this.carts;

				// 点击全选 对 allChecked 状态取反
				allChecked = !allChecked;
				//对购物车里面的carts属性进行循环 v.checked = allChecked
				// forEach 用法 与map区别 map 会返回循环之后的数组 forEach不会
				carts.forEach(v => v.checked = allChecked);
				this.setCart(carts);

			},

			// 购物车列表的选中事件
			handleCheck: function(e) {
				// 1. 获取当前点击列表的goods_id
				const {
					goods_id
				} = e.currentTarget.dataset;
				console.log(goods_id);
				//2. 从storage里面获取当前购物小车的列表 carts
				const carts = uni.getStorageSync("carts") || [];
				//3. 对购物小车里面的carts 进行循环 找到 goods_id对应的item
				//index 就是对应item 的下标
				const index = carts.findIndex(v => v.goods_id == goods_id);
				// 对选中元素的checked属性 取反
				carts[index].checked = !carts[index].checked;
				//把最新的carts 设置回 this.data 和 storage里面
				this.setCart(carts);
			},
			// setCart的作用 就是用来计算购物小车需要的总价和数量,以及
			//全选状态 allChecked
			//把全新的 carts 重新设置回 storage 保持 storage里面的carts 与 this.data里面的carts 同步
			// allChecked 的处理逻辑
			//1. allChecked 如果购物车里面的购物车数据 v.checked 属性都为true => allChecked = true
			//2. 其它情况下 allChecked = false
			setCart: function(carts) {
				let allChecked = true; //默认情况下 全选

				//商品总数
				let totalNum = 0;
				//选中 商品的总价
				let totalPrice = 0;
				//循环购物小车
				carts.forEach(v => {
					if (v.checked) {
						// allChecked 不用修改
						// 计算商品总数
						totalNum += v.num; // totalNum = totalNum + v.num;
						//计算商品总价
						totalPrice += v.num * v.goods_price
					} else {
						//只要其中一个不为真，allChecked就为false
						allChecked = false;
					}
				})

				//把数据存到data中 视图就会更新
				this.carts = carts;
				this.allChecked = allChecked;
				this.totalNum = totalNum;
				this.totalPrice = totalPrice; //把全新的 carts 重新设置回 storage 保持 storage里面的carts 与 this.data里面的carts 同步
				uni.setStorageSync("carts", carts);
			}
		}
	}
</script>

<style lang="less">
	/* 
  商品列表样式
*/
	.pyg_cart {
		/* 购物车列表 */
		/* 底部工具栏 */
	}

	.pyg_cart .cart_list {
		height: 100vh;
		width: 100vw;
		padding: 27rpx 25rpx 0rpx 27rpx;
		background-color: white;
		/* 对应的商品每一列 */
	}

	.pyg_cart .cart_list .cart_list_item {
		height: 209rpx;
		width: 698rpx;
		overflow: hidden;
		/* 商品描述区  */
	}

	.pyg_cart .cart_list .cart_list_item .iconfont.icon-xuanzhong {
		margin-top: 87rpx;
		margin-left: 8rpx;
		color: var(--themeColor);
		float: left;
	}

	.pyg_cart .cart_list .cart_list_item .unselected {
		margin-top: 87rpx;
		margin-left: 8rpx;
		height: 35rpx;
		width: 35rpx;
		border-radius: 50%;
		border: 1rpx solid #8A8A8A;
		color: white;
		float: left;
	}

	.pyg_cart .cart_list .cart_list_item .image_wrapper {
		margin: 9rpx 0 9rpx 78rpx;
	}

	.pyg_cart .cart_list .cart_list_item .image_wrapper image {
		height: 191rpx;
		width: 191rpx;
		float: left;
	}

	.pyg_cart .cart_list .cart_list_item .goods_desc {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.pyg_cart .cart_list .cart_list_item .goods_desc .goods_desc_title {
		padding-top: 26rpx;
		padding-left: 19rpx;
		font-size: 24rpx;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.pyg_cart .cart_list .cart_list_item .goods_desc .goods_desc_func {
		display: flex;
		justify-content: space-between;
		padding-left: 28rpx;
		padding-bottom: 28rpx;
	}

	.pyg_cart .cart_list .cart_list_item .goods_desc .goods_desc_func .price {
		color: var(--themeColor);
	}

	.pyg_cart .cart_list .cart_list_item .goods_desc .goods_desc_func .goods_desc_addAndSub {
		display: flex;
		height: 32rpx;
	}

	.pyg_cart .cart_list .cart_list_item .goods_desc .goods_desc_func .goods_desc_addAndSub .iconfont.icon-iconset0187 {
		font-size: 32rpx;
		margin-right: 22rpx;
	}

	.pyg_cart .cart_list .cart_list_item .goods_desc .goods_desc_func .goods_desc_addAndSub .num {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #8A8A8A;
	}

	.pyg_cart .cart_list .cart_list_item .goods_desc .goods_desc_func .goods_desc_addAndSub .iconfont.icon-54 {
		display: flex;
		align-self: center;
		font-size: 32rpx;
		margin-left: 22rpx;
	}

	.pyg_cart .tools_set {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		border: 1rpx solid #ccc;
		background-color: white;
		height: 83rpx;
	}

	.pyg_cart .tools_set .tools_left {
		display: flex;
		align-items: center;
	}

	.pyg_cart .tools_set .tools_left .iconfont.icon-xuanzhong {
		color: var(--themeColor);
		margin-left: 23rpx;
	}

	.pyg_cart .tools_set .tools_left .unselected {
		height: 35rpx;
		width: 35rpx;
		border-radius: 50%;
		border: 1rpx solid #8A8A8A;
		margin-left: 23rpx;
	}

	.pyg_cart .tools_set .tools_left .allSelectText {
		font-size: 21rpx;
		color: #8A8A8A;
		margin-left: 24rpx;
	}

	.pyg_cart .tools_set .tools_left .totalText {
		margin-left: 36rpx;
		font-size: 26rpx;
		color: #292929;
	}

	.pyg_cart .tools_set .tools_left .totalPrice {
		color: var(--themeColor);
		font-size: 28rpx;
	}

	.pyg_cart .tools_set .tools_right {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 52rpx;
		width: 150rpx;
		background-color: var(--themeColor);
		color: white;
		font-size: 21rpx;
		border-radius: 26rpx;
		margin-right: 21rpx;
	}

	.pyg_cart .tools_set .tools_right_disable {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 52rpx;
		width: 150rpx;
		background-color: #b6b6b6;
		color: white;
		font-size: 21rpx;
		border-radius: 26rpx;
		margin-right: 21rpx;
	}

	/* 空白购物车样式 */
	.pyg_cart_empty {
		height: 100vh;
		background-color: white;
	}

	.pyg_cart_empty .empty_text {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #5f5f64;
		font-size: 500;
	}

	.pyg_cart_empty .empty_info {
		padding: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ccc;
	}

	.pyg_cart_empty navigator {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pyg_cart_empty navigator .go_shopping {
		font-size: 20rpx;
		text-align: center;
		width: 88rpx;
		padding: 15rpx;
		border: 1rpx solid #ccc;
		color: var(--themeColor);
	}
</style>
